<template>
  <div class="indices">
    <div class="detail">
      <el-row>
        <template v-for="(item, index) in indices" :key="item.top">
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <Content
              :item="item"
              @click="contentClick"
              :index="index"
              :color="index == currentIndex ? '#3460ff' : '#c2c2c3'"
              :x="
                index > 3
                  ? `${-69 - (index - 4) * 60}px`
                  : `${-69 - index * 60}px`
              "
              :y="index > 3 ? '-70px' : '-4px'"
            />
          </el-col>
        </template>
      </el-row>
    </div>
    <div class="text">
      {{ indices[currentIndex]?.txt }}
    </div>

    <template v-for="item in indices[currentIndex]?.day4List" :key="item.date">
      <div class="value">
        <div class="left">
          <div class="date">{{ item.date }}</div>
          <div class="day">{{ item.day }}</div>
        </div>
        <div class="right">
          <div class="level" :style="{ backgroundColor: item.color }">
            {{ item.level }}
          </div>
          <div class="txt">{{ item.txt }}</div>
        </div>
      </div>
    </template>
  </div>
</template>


<script>
export default { name: "indices" };
</script>
<script setup>
import Content from "./cpns/content.vue";

import usePublicStore from "@/stores/modules/public";
import useIndicesStore from "@/stores/modules/indices";
import { storeToRefs } from "pinia";

const publicStore = usePublicStore();
const { city, code } = storeToRefs(publicStore);

const indicesStore = useIndicesStore();
watch(city, (newCity) => {
  indicesStore.fetchIndicesData(newCity, code.value);
});
city.value && indicesStore.fetchIndicesData(city.value, code.value);

const { indices, currentIndex } = storeToRefs(indicesStore);

const contentClick = (e) => {
  indicesStore.fetchCurrentIndex(e);
};
</script>

<style lang="less" scoped>
.indices {
  max-width: 1180px;
  margin: 0 auto;
}
.indices {
  padding: 40px 0;
  border-radius: 16px;
  background-color: #f7f8f9;
  border: 1px solid #f2f4fa;
  .detail {
    max-width: 800px;
    margin: 0 auto;
  }
  .text {
    max-width: 800px;
    padding: 0 36px;
    margin: 40px auto 20px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.5);
  }
  .value {
    display: flex;
    padding: 0 36px;
    max-width: 800px;
    margin: 8px auto;
    .left {
      margin-right: 30px;
      .date {
        font-size: 17px;
      }
      .day {
        font-size: 15px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
    .right {
      flex: 1;
      background-color: #fff;
      border-radius: 16px;
      padding: 12px 20px;
      .level {
        border-radius: 5px;
        padding: 3px 7px;
        font-size: 18px;
        color: #fff;
        background-color: #6c6c6c;
      }
      .txt {
        margin-top: 10px;
        font-size: 15px;
        line-height: 26px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>